<template>
    <div class="margin-left-48">
        <el-col :span="12">
            <el-row>
                <div class="screen-data-title">本科生报到人数</div>
            </el-row>
            <el-row class="margin-top-16">
                <div
                    class="screen-data-number screen-undergraduate-color"
                >{{formData.undergraduateRegisterCount[0]}}</div>
                <div
                    class="screen-data-number screen-undergraduate-color margin-left-16"
                >{{formData.undergraduateRegisterCount[1]}}</div>
                <div
                    class="screen-data-number screen-undergraduate-color margin-left-16"
                >{{formData.undergraduateRegisterCount[2]}}</div>
                <div
                    class="screen-data-number screen-undergraduate-color margin-left-16"
                >{{formData.undergraduateRegisterCount[3]}}</div>
            </el-row>
            <el-row class="margin-top-8">
                <div class="screen-float-left">
                    <span class="screen-title-01">报到率</span>
                    <div
                        class="screen-student-rate-val screen-rate-color"
                    >{{formData.undergraduateRegisterRate | percentage}}</div>
                </div>
                <div class="screen-float-left margin-left-16">
                    <span class="screen-title-01">总人数</span>
                    <div
                        class="screen-student-sum-val screen-undergraduate-color"
                    >{{formData.undergraduateTotalCount}}</div>
                </div>
                <div class="screen-float-left margin-left-16">
                    <span class="screen-title-01">未报到人数</span>
                    <div
                        class="screen-student-sum-val screen-undergraduate-color"
                    >{{formData.undergraduateTotalCount - formData.undergraduateRegisterCount}}</div>
                </div>
                <div class="screen-float-left margin-left-16">
                    <span class="screen-title-01">绿色通道</span>
                    <div
                        class="screen-student-green-val screen-green-color"
                    >{{formData.undergraduateGreenChannelCount}}</div>
                </div>
            </el-row>
            <el-row class="margin-top-16">
                <div class="screen-chart">
                    <div class="scree-university"></div>
                </div>
            </el-row>
            <el-row style="margin-top:24px">
                <div class="screen-data-title">本科生分时统计</div>
            </el-row>
            <el-row class="margin-top-16">
                <div class="screen-chart" id="undergraduateChart"></div>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-row>
                <div class="screen-data-title">各学堂报到统计</div>
            </el-row>
            <el-row class="screen-collage-table-container">
                <table>
                    <thead>
                        <tr height="52px">
                            <th
                                v-for="(column,index) in table.columns"
                                :key="index"
                                class="screen-collage-table-title"
                                :width="column.width"
                                :align="column.align"
                            >{{column.title}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr height="4px">
                            <td :colspan="table.columns.length">
                                <div class="header-line"></div>
                            </td>
                        </tr>
                        <tr height="8px">
                            <td :colspan="table.columns.length"></td>
                        </tr>
                        <tr
                            v-for="(tableData,index) in formData.registerCollegeList"
                            v-if="isCurrentPageData(index)"
                            :key="index"
                            height="48px"
                        >
                            <td :width="table.columns[0].width">{{tableData[table.columns[0].key]}}</td>
                            <td :width="table.columns[1].width">
                                <div style="line-height:48px">
                                    <div
                                        class="screen-rate-color"
                                        style="width:100px;float:left;"
                                    >{{tableData[table.columns[1].key] | percentage}}</div>
                                    <div style="float:left;width:220px;margin-top:15px;">
                                        <el-progress
                                            class="undergraduate-progress"
                                            :percentage="tableData[table.columns[1].key]*100"
                                            :stroke-width="18"
                                            :show-text="false"
                                        ></el-progress>
                                    </div>
                                </div>
                            </td>
                            <td
                                :width="table.columns[2].width"
                                align="center"
                            >{{tableData[table.columns[2].key]}}</td>
                            <td
                                :width="table.columns[3].width"
                                align="center"
                            >{{tableData[table.columns[3].key]}}</td>
                        </tr>
                    </tbody>
                </table>
            </el-row>
        </el-col>
    </div>
</template>

<script>
import echarts from "echarts";
import screenApi from "common/src/api/screen";
import filters from "common/src/filters";
export default {
    name: "All",
    props: ["colors"],
    data() {
        return {
            collageTimer: undefined,
            table: {
                pageNum: 1, // 当前页码，从1开始。
                pageSize: 16, // 每页显示数据条数。
                columns: [
                    {
                        width: "270px",
                        title: "学堂",
                        key: "collegeName",
                        align: "left"
                    },
                    {
                        width: "340px",
                        title: "报到率",
                        key: "collegeRegisterRate",
                        align: "left"
                    },
                    {
                        width: "120px",
                        title: "已报到人数",
                        key: "collegeRegisterCount",
                        align: "center"
                    },
                    {
                        width: "100px",
                        title: "总人数",
                        key: "collegeTotalCount",
                        align: "center"
                    }
                ]
            },
            formData: {
                undergraduateRegisterCount: "0000",
                undergraduateTotalCount: 0,
                undergraduateRegisterRate: 0,
                undergraduateGreenChannelCount: 0,
                xAxisKey: [],
                xAxisData1: [],
                registerCollegeList: []
            }
        };
    },
    filters: {
        percentage(rate) {
            return filters.percentage(rate);
        }
    },
    methods: {
        renderChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(
                document.getElementById("undergraduateChart")
            );
            // 指定图表的配置项和数据
            myChart.setOption({
                xAxis: {
                    show: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    data: this.formData.xAxisKey,
                    axisLabel: {
                        color: "#7795b1"
                    }
                },
                yAxis: {
                    show: false,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    {
                        type: "bar",
                        data: this.formData.xAxisData1,
                        barWidth: "16px",
                        stack: "aaaaa",
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                color: "#c4cce3"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: this.colors.undergraduate
                                                .color0
                                        },
                                        {
                                            offset: 1,
                                            color: this.colors.undergraduate
                                                .color1
                                        }
                                    ]
                                ),
                                //柱形图圆角，初始化效果
                                barBorderRadius: [7, 7, 7, 7]
                            }
                        }
                    }
                ]
            });
        },
        isCurrentPageData(index) {
            return (
                index >= (this.table.pageNum - 1) * this.table.pageSize &&
                index < this.table.pageNum * this.table.pageSize
            );
        },
        changeBackendData(data) {
            let formData = data;
            // 本科生报到人数
            formData.undergraduateRegisterCount = String(
                data.undergraduateRegisterCount
            ).padStart(4, "0");

            formData.undergraduateTotalCount =
                data.undergraduateTotalCount || 0;
            formData.undergraduateRegisterCount =
                data.undergraduateRegisterCount || 0;

            // 本研分时统计图表
            formData.xAxisKey = [];
            formData.xAxisData1 = [];

            // 柱形图数据
            for (let item of data.registerDayList) {
                formData.xAxisKey.push(item.hourKey);
                formData.xAxisData1.push(item.underRegisterCounts);
            }
            if (formData.registerCollegeList) {
                _.forEach(formData.registerCollegeList, item => {
                    item.collegeRegisterRate = _.round(
                        item.collegeRegisterCount / item.collegeTotalCount,
                        2
                    );
                });
            }
            return formData;
        },
        initTimer() {
            this.collageTimer = window.setInterval(() => {
                let newPageNum;
                if (
                    this.table.pageNum * this.table.pageSize <
                    this.formData.registerCollegeList.length
                ) {
                    newPageNum = this.table.pageNum + 1;
                } else {
                    newPageNum = 1;
                }
                this.table.pageNum = newPageNum;
            }, 2000);
        },
        init() {
            screenApi
                .findStudentRegisterInfo(2)
                .then(
                    response => {
                        if (response.code === 200) {
                            this.formData = this.changeBackendData(
                                response.data
                            );
                            this.renderChart();
                        }
                    },
                    error => {
                        // 数据保存为上一次请求的数据。
                    }
                )
                .catch(error => {
                    // 数据保存为上一次请求的数据。
                });
        }
    },
    mounted() {
        this.initTimer();
    },
    destroyed() {
        // 销毁定时器
        if (this.collageTimer) {
            window.clearInterval(this.collageTimer);
            this.collageTimer = undefined;
        }
    }
};
</script>

<style scoped>
.scree-university {
    position: absolute;
    margin: 20px;
    width: 832px;
    height: 184px;
    background: url("/static/images/screen/point03.png");
    background-position: center;
    background-repeat: no-repeat;
}
.screen-float-left {
    float: left;
}
</style>
